@mixin clearfix {
  $selector: &;

  @at-root {
    #{$selector}:before,
    #{$selector}:after {
      display: table;
      content: "\20";
    }

    #{$selector}:after {
      clear: both;
    }
  }
}

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin unselect {
  user-select: none;
}

@mixin anim($name: false) {
  @if $name {
    @at-root {
      @keyframes #{$name} {
        @content;
      }
    }
  }
}
